/**
* @description: 待办消息更多展示
* @author: JiWei
* @remark:
**/
<template>
  <view class="todo-main">
    <nav-bar class="header" back title="待办消息" @goBack="goBack"></nav-bar>
    <view class="todo-content">
      <view class="header-bar">
        <!-- 切换tab -->
        <view class="get-state-tab">
          <view class="info-tab-item" :class="currentTab === 'non-executed' ? ' info-tab-current': ''"
                @click="tabChange('non-executed')">待办事项</view>
          <view class="info-tab-item" :class="currentTab === 'executed' ? ' info-tab-current': ''"
                @click="tabChange('executed')">消息公告</view>
        </view>
      </view>
      <view class="announce-content" v-if="taskList.length > 0">
          <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
            <van-list v-model="isLoading" :finished="finished" finished-text="没有更多了" @load="loadMore">
              <view class="task-list" v-for="(item,index) in taskList" :key="index" @click="jump(item)" v-if="currentTab === 'non-executed'">
                <img src="../../../../static/controlImg/index-tz.png" alt="">
                <view class="todo-right">
                  <p>{{item.ENG_NAME}}</p>
                  <p>{{item.FILL_TIME}}</p>
                </view>
              </view>
              <view class="message-list" v-for="(item,index) in taskList" :key="index"  v-if="currentTab === 'executed'">
                <view class="todo-right">
                  <p>{{item.title}}</p>
                  <hr>
                  <p>2023</p>
                </view>
              </view>
            </van-list>
          </van-pull-refresh>
      </view>
    </view>
  </view>
</template>
<script>
import navBar from "../../../../components/common/nav-bar";
import {mapGetters} from "vuex";
export default {
  name: 'todoList',
  components: { navBar },
  props: {},
  data() {
    return {
      currentTab:"non-executed",
      currentIndex:'0',
      refreshing: false, // 是否正在刷新
      isLoading: false,
      finished: false,
      total: 0, // 总条数
      page: 1,
      limit: 5,
      taskList:[],
    };
  },
  computed: {
    ...mapGetters(['userData','txgkAuth'])
  },
  watch: {},
  onLoad() {
    this.getMatterlistT()
  },
  methods: {
    goBack() {
      uni.navigateTo({
        url: '/pages/communicationControl/index/index'
      })
    },
    // 获取待办列表
    getMatterlistT() {
      let params = {
        userid: this.userData.USERID,
        roleid: this.userData.ROLEID,
        limit: this.limit,
        page: this.page,
      }
      this.$apiRequest.gcgkApi.getMatterlist(params).then(res => {
        this.isLoading = false;
        this.refreshing = false;
        this.taskList = this.taskList.concat(res.rows);
        this.total = +res.total
      })
    },
    tabChange(currentTab) {
      this.currentTab = currentTab;
      (currentTab === "executed") && (this.currentIndex = '1');
      (currentTab === "non-executed") && (this.currentIndex = '0');
      this.onRefresh()
    },
    onRefresh() {
      this.refreshing = true;
      this.finished = false;
      this.page = 1;
      this.taskList = [];
      this.getMatterlistT()
    },
    loadMore() {
      if ( this.total > this.taskList.length) {
        this.page = this.page + 1;
        this.getMatterlistT()
      } else {
        this.finished = true;
      }
    },
    jump(item) {
      if(this.currentTab === 'non-executed') {
		if(item.DBLX === 'SP'){
			// 审批
			uni.navigateTo({
			  url: `/pages/communicationControl/workbench/todoTask/projectAudit?engId=${item.ENG_ID}&stationId=${item.STATION_ID}`
			})
		}else{
			// 问题整改
			uni.navigateTo({
			  url: `/pages/communicationControl/workbench/todoTask/problemRectification?engId=${item.ENG_ID}&stationId=${item.STATION_ID}`
			})
		}
      }
    }
  }
};
</script>
<style scoped lang="scss">
.todo-main {
  width: 100vw;
  height: 100vh;
  background: #F2F6FA;
  .todo-content {
    height: calc(100vh - #{px2vh(200)});
    .header-bar {
      flex-shrink: 0;
      height: px2vh(220);
      background: #417ADC;
      overflow: hidden;
      margin-top: px2vh(-1);
      .get-state-tab {
        width: calc(100% - #{px2vw(60)});
        height: px2vh(120);
        border-radius: px2vw(20);
        box-sizing: border-box;
        margin: px2vh(40) px2vw(30) px2vh(37);
        background-color: rgba(255, 255, 255, 0.4);
        display: flex;
        justify-content: center;
        align-items: center;
        border: px2vw(1) solid rgba(198, 215, 245, 1);
        .info-tab-item {
          width: 50%;
          display: flex;
          justify-content: center;
          align-items: center;
          color: rgba(255, 255, 255, 1);
          font-weight: bold;
          font-size: px2vw(38);
          &.info-tab-current {
            height: px2vh(100);
            margin: 0 px2vw(10);
            margin-right: px2vw(10);
            border-radius: px2vw(20);
            background-color: rgba(255, 255, 255, 0.7);
            color: rgba(65, 122, 220, 1);
            font-weight: Bold;
          }
        }
      }
    }
    .announce-content {
      width: calc(100% - #{px2vw(60)});
      margin-left: px2vw(30);
      height: calc(100vh - #{px2vh(450)});
      margin-top: px2vh(30);
      overflow: auto;
      .task-list {
        height: px2vh(190);
        background: #fff;
        display: flex;
        flex-wrap: nowrap;
        margin-bottom: px2vh(30);
        border-radius: px2vw(20);
        img {
          width: px2vw(98);
          margin:  px2vh(48) px2vw(44);
        }
        .todo-right {
          width: calc(100% - #{px2vw(230)});
          height: calc(100% - #{px2vh(96)});
          margin-top: px2vh(48);
          p:first-child {
            font-size: px2vw(42);
            color: #666;
            white-space:nowrap;
            overflow:hidden;
            text-overflow:ellipsis;
          }
          p:last-child {
            font-size: px2vw(38);
            margin-top: px2vh(12);
            color: #ccc;
          }
        }
      }
      .message-list {
        height: px2vh(300);
        background: #fff;
        margin-bottom: px2vh(30);
        border-radius: px2vw(20);
        .todo-right {
          width: calc(100% - #{px2vw(60)});
          margin-left: px2vw(30);
          height: calc(100% - #{px2vh(96)});
          p:first-child {
            font-size: px2vw(42);
            color: #666;
            padding: px2vh(40) 0;
          }
          hr {
            height: px2vh(1);
            background: none repeat scroll 0 0 #e5e5e5;
            border: thin none;
            margin-bottom: px2vh(30);
          }
          p:last-child {
            font-size: px2vw(36);
            color: #ccc;
          }
        }
      }
    }
  }
}
</style>
